<?php $layout = 'admin';
$title = '主题管理 - MyCMS'; ?>

<!-- 主题列表 -->
<div class="card">
    <div class="card-header">
        <h2>可用主题</h2>
    </div>
    <div class="card-body">
        <?php if (empty($themes)): ?>
            <div style="text-align: center; padding: 3rem; color: #666;">
                <div style="font-size: 3rem; margin-bottom: 1rem;">🎨</div>
                <h3 style="margin: 0 0 1rem; color: #666;">暂无可用主题</h3>
                <p style="margin: 0;">请在 templates/themes 目录中添加主题</p>
            </div>
        <?php else: ?>
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem;">
                <?php foreach ($themes as $themeId => $theme): ?>
                    <div class="card" style="margin: 0; <?= $themeId === $currentTheme ? 'border: 2px solid var(--primary-color);' : '' ?>">
                        <div class="card-header" style="background-color: <?= $themeId === $currentTheme ? 'var(--primary-color)' : 'inherit' ?>; color: <?= $themeId === $currentTheme ? 'white' : 'inherit' ?>;">
                            <h3 style="margin: 0; font-size: 1.2rem;"><?= htmlspecialchars($theme['name'] ?? ucfirst($themeId)) ?></h3>
                            <?php if ($themeId === $currentTheme): ?>
                                <span style="font-size: 0.8rem; background: rgba(255,255,255,0.3); padding: 0.2rem 0.5rem; border-radius: 4px;">当前主题</span>
                            <?php endif; ?>
                        </div>
                        <div class="card-body">
                            <div style="margin-bottom: 1rem;">
                                <?php if (isset($theme['screenshot']) && file_exists(APP_ROOT . '/public' . $theme['screenshot'])): ?>
                                    <img src="<?= htmlspecialchars($theme['screenshot']) ?>" alt="<?= htmlspecialchars($theme['name'] ?? $themeId) ?>" style="width: 100%; height: 150px; object-fit: cover; border-radius: 4px;">
                                <?php else: ?>
                                    <div style="width: 100%; height: 150px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; border-radius: 4px;">
                                        <span style="color: #999;">无预览图</span>
                                    </div>
                                <?php endif; ?>
                            </div>

                            <div style="margin-bottom: 1rem;">
                                <p style="margin: 0 0 0.5rem; color: #666;"><?= htmlspecialchars($theme['description'] ?? '无描述') ?></p>
                                <div style="font-size: 0.85rem; color: #666;">
                                    <p style="margin: 0;">版本: <?= htmlspecialchars($theme['version'] ?? '1.0.0') ?></p>
                                    <p style="margin: 0;">作者: <?= htmlspecialchars($theme['author'] ?? 'Unknown') ?></p>
                                </div>
                            </div>

                            <div style="display: flex; gap: 0.5rem;">
                                <?php if ($themeId !== $currentTheme): ?>
                                    <form method="post" action="/admin/themes/activate">
                                        <?php echo App\Core\CSRF::field(); ?>
                                        <input type="hidden" name="theme" value="<?= htmlspecialchars($themeId) ?>">
                                        <button type="submit" class="btn">激活主题</button>
                                    </form>
                                <?php endif; ?>

                                <a href="/theme/preview?theme=<?= urlencode($themeId) ?>&redirect=/" target="_blank" class="btn btn-secondary">预览主题</a>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<!-- 主题上传 -->
<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <h2>上传新主题</h2>
    </div>
    <div class="card-body">
        <p style="margin-bottom: 1rem; color: #666;">
            主题上传功能正在开发中。目前，您可以手动将主题文件夹放置在 <code>templates/themes</code> 目录下。
        </p>

        <div style="background: #f8f9fa; padding: 1rem; border-radius: 4px; border-left: 4px solid #007bff;">
            <h4 style="margin: 0 0 0.5rem; color: #333; font-size: 0.9rem;">主题目录结构</h4>
            <pre style="margin: 0; font-family: monospace; font-size: 0.85rem; color: #666;">
templates/themes/your-theme/
├── layouts/
│   └── app.php         # 主题布局文件
├── home.php            # 首页模板
├── posts/              # 文章相关模板
│   ├── index.php
│   ├── show.php
│   └── form.php
└── theme.json          # 主题配置文件
            </pre>
        </div>
    </div>
</div>

<!-- 主题开发指南 -->
<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <h2>主题开发指南</h2>
    </div>
    <div class="card-body">
        <p style="margin-bottom: 1rem;">
            开发自定义主题可以让您完全控制网站的外观和用户体验。以下是开发主题的基本步骤：
        </p>

        <ol style="margin-bottom: 1rem; padding-left: 1.5rem;">
            <li style="margin-bottom: 0.5rem;">在 <code>templates/themes</code> 目录下创建新的主题文件夹</li>
            <li style="margin-bottom: 0.5rem;">创建 <code>layouts/app.php</code> 作为主题的主布局文件</li>
            <li style="margin-bottom: 0.5rem;">创建 <code>theme.json</code> 文件，定义主题的元数据</li>
            <li style="margin-bottom: 0.5rem;">根据需要创建或覆盖其他模板文件</li>
            <li>测试并激活您的主题</li>
        </ol>

        <div style="background: #fff3cd; padding: 1rem; border-radius: 4px; border: 1px solid #ffeeba;">
            <h4 style="margin: 0 0 0.5rem; color: #856404; font-size: 0.9rem;">⚠️ 注意事项</h4>
            <ul style="margin: 0; padding-left: 1.2rem; color: #856404; font-size: 0.85rem;">
                <li>确保您的主题包含所有必要的模板文件，或者系统将回退到默认主题</li>
                <li>主题应当响应式设计，以适应不同的设备尺寸</li>
                <li>测试您的主题在不同浏览器中的兼容性</li>
                <li>考虑添加主题选项，让用户可以自定义主题的某些方面</li>
            </ul>
        </div>
    </div>
</div>